<template>
    <div class="listDiv team-data-box">
        <div class="data-label flex-row-center mb20">
            <div class="label-line ml30 mr20"></div>
            <span>管委会资料</span>
        </div>
        <div class="data-con flex-column pd10-row pd20-column">
            <div class="el-form-box" style="overflow-y: auto;">
                <el-form class="datas-form" ref="form" :model="obj.data" label-width="130px">
                    <el-form-item label="名称" prop="name" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.name" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="市区街道" prop="citys" :rules="[formRulesMixin.notNull]">
                        <el-cascader v-model="obj.data.citys" :options="hebeicitys" @change="handleChange" :props="{checkStrictly: true}" style="width:400px;" />
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.address" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" prop="concat" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.concat" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="mobile" :rules="[formRulesMixin.notNull]">
                        <el-input v-model="obj.data.mobile" clearable autocomplete="off" maxlength="11" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="管委会介绍" prop="msg" :rules="[formRulesMixin.notNull]">
                        <Editer v-model:value="obj.data.msg" :maxheight="100000" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex-row ju-flex-end"><span class="btn sub" @click.prevent="upData">提交</span></div>
        </div>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    import Editer from "@/components/editer.vue"
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        data:{
            name: "",
            citys: ['1301','130110'],
            address: "",
            concat: "",
            mobile:"",
            msg: ''
        },
    })

    let init = async () => {
        proxy.$ajax({
            url: 'material',
            data: {},
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.data = {...obj.data, ...d.msg}
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    init()

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                let param = {
                    ...obj.data,
                    city: obj.data.citys[obj.data.citys.length-1]
                }
                console.log(param);
                // return
                proxy.$ajax({
                    url: 'material/design',
                    data: param,
                    bfLoading: true,
                    // timeout:60000
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin('修改成功', 'success')
                        // proxy.$emit('init')
                        // proxy.$emit('close')
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
</style>